<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-09-06 00:34:26
 * @LastEditTime : 2020-02-04 23:12:57
 * @LastEditors  : Please set LastEditors
 -->
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../css/vant.css">
    <link rel="stylesheet" type="text/css" href="../css/base.css" />
    <script type="text/javascript" src="../script/jquery.js"></script>
    <script type="text/javascript" src="../script/echarts.js"></script>
    <script type="text/javascript" src="../script/layer/mobile/layer.js"></script>
    <script type="text/javascript" src="../script/vue.min.js"></script>
    <script type="text/javascript" src="../script/vant.min.js"></script>
    <script type="text/javascript" src="../script/fastclick.js"></script>
    <script type="text/javascript" src="../script/base.js"></script>
    <style type="text/css">
        .van-cell__value {
            text-align: right;
        }

        .user-img {
            width: 50px;
            height: 50px;
            border-radius: 25px;
            overflow: hidden;
            display: inline-block;
        }

        .user-img img {
            width: 100%;
            height: 100%;
        }



        .tab {
            padding: 15px;
            overflow: hidden;
        }

        .tab .t-d {
            float: right;
            font-size: 0;
            border-radius: 6px;
        }

        .tab .t-d>div {
            display: inline-block;
            width: 60px;
            text-align: center;
            height: 24px;
            font-size: 13px;
            border: 1px solid #cd1b21;
            line-height: 22px;
        }

        .tab .t-d>div.on {
            background: #cd1b21;
            color: #fff;
            line-height: 22px;
        }



        #main {
            width: 100%;
            height: 500px;
        }

        .spec {
            display: inline-block;
            color: #cd1b21;
            text-decoration: underline;
        }

        .no-b{
            border-left: 0!important;
            border-right: 0!important;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="init-full">
            <van-nav-bar class="head" title="数据汇总" left-arrow @click-left="onClickLeft">
                <div slot="right" class="head-right" v-if="tabActive != 2">
                    <span @click="showSearch = true;">
                        <img src="../image/search.png" />
                    </span>
                </div>
            </van-nav-bar>
            <div class="body-no-bottom">
                <div class="content">

                    
                    <div class="tab">
                        <div class="t-d">
                            <div :class="tabActive == 1?'on':''" @click="toggleActive(1)">经营</div>
                            <div class="no-b" :class="tabActive == 2?'on':''" @click="toggleActive(2)">收益</div>
                            <div :class="tabActive == 3?'on':''" @click="toggleActive(3)">图表</div>
                        </div>
                    </div>

                    <div class="report" v-show="tabActive == 1" style="background: transparent;">
                        <div class="table-full">
                            <table>
                                <tr>
                                    <th style="visibility: hidden;">分支机构</th>
                                    <th style="visibility: hidden;">账期</th>
                                    <th>销售金额</th>
                                    <th>销售收款</th>
                                    <th>销售毛利</th>
                                    <th>费用折扣</th>
                                    <th>本月收益</th>
                                    <th>活跃客户</th>
                                    <th>平均销售额</th>
                                    <!-- <th v-if="searchData.S_BranchID == 1">分公司收益</th> -->
                                </tr>
                                <tr v-for="row in reportList">
                                    <td class="td_center" style="visibility: hidden;">{{row.BSName}}</td>
                                    <td class="td_center" style="visibility: hidden;">{{row.PeriodCD}}</td>
                                    <td class="td_right" @click="intoDetail(row,1)"><span
                                            class="spec">{{row.XSMoney}}</span></td>
                                    <td class="td_right" @click="intoDetail(row,2)"><span
                                            class="spec">{{row.SKMoney}}</span></td>
                                    <td class="td_right">{{row.XMMoney}}</td>
                                    <td class="td_right">{{row.FZMoney}}</td>
                                    <td class="td_right">{{row.SYMoney}}</td>
                                    <td class="td_right">{{row.NClint}}</td>
                                    <td class="td_right">{{row.PJMoney}}</td>
                                    <!-- <td class="td_right" v-if="searchData.S_BranchID == 1">{{row.FSYMoney}}</td> -->
                                </tr>
                                <tr style="font-weight: 700;">
                                    <td class="td_center" style="visibility: hidden;">合计</td>
                                    <td class="td_center" style="visibility: hidden;">合计</td>
                                    <td class="td_right">{{reportTotalData.num1}}</td>
                                    <td class="td_right">{{reportTotalData.num2}}</td>
                                    <td class="td_right">{{reportTotalData.num3}}</td>
                                    <td class="td_right">{{reportTotalData.num4}}</td>
                                    <td class="td_right">{{reportTotalData.num5}}</td>
                                    <td class="td_right">{{reportTotalData.num6}}</td>
                                    <td class="td_right">{{reportTotalData.num7}}</td>
                                    <!-- <td class="td_right" v-if="searchData.S_BranchID == 1">{{reportTotalData.num8}}</td> -->
                                </tr>
                            </table>
                        </div>

                        <div class="table-fixed">
                            <table>
                                <tr>
                                    <th>分支机构</th>
                                    <th>账期</th>
                                </tr>
                                <tr v-for="row in reportList">
                                    <td class="td_center">{{row.BSName}}</td>
                                    <td class="td_center">{{row.PeriodCD}}</td>
                                </tr>
                                <tr style="font-weight: 700;">
                                    <td class="td_center" colspan="2">合计</td>
                                </tr>
                            </table>
                        </div>

                    </div>
                    <div class="report" v-show="tabActive == 2" style="background: transparent;">
                        <div class="table-full">
                            <table>
                                <tr>
                                    <th style="visibility: hidden;">姓名</th>
                                    <th>累计收益</th>
                                    <th>本月收益</th>
                                    <th>累计支出</th>
                                    <th>当前余额</th>
                                    <th>固定收益</th>
                                    <th>当前累计金额</th>
                                </tr>
                                <tr v-for="row in accountList">
                                    <td class="td_center" style="visibility: hidden;">{{row.UserName}}</td>
                                    <td class="td_right">{{row.ZHMoney}}</td>
                                    <td class="td_right">{{row.SYMoney}}</td>
                                    <td class="td_right">{{row.ZCMoney}}</td>
                                    <td class="td_right">{{row.YEMoney}}</td>
                                    <td class="td_right">{{row.GMoney}}</td>
                                    <td class="td_right">{{row.NSMoney}}</td>
                                </tr>
                            </table>
                        </div>
                        <div class="table-fixed">
                            <table>
                                <tr>
                                    <th>姓名</th>
                                </tr>
                                <tr v-for="row in accountList">
                                    <td class="td_center" @click="intoAccountDetail(row)"><span
                                            class="spec">{{row.UserName}}</span></td>
                                </tr>
                            </table>
                        </div>


                    </div>
                    <div class="chart" v-show="tabActive == 3">
                        <div id="main"></div>
                    </div>

                </div>
                <van-loading v-if="showLoading" />
            </div>
        </div>

        <van-popup v-model="showSearch" round position="bottom">
            <div>
                <van-cell title="账期" :value="searchData.S_CXPeriodName" is-link @click="openScreen(-1,110)">
                </van-cell>
                <van-cell title="分支机构" :value="searchData.S_CXBranchName" is-link @click="openScreen(-1,98)"
                    v-if="searchData.S_BranchID == 1">
                </van-cell>
            </div>
            <div class="btn-padding">
                <van-button type="primary" block style="border-radius: 0;" @click="searchList">查询</van-button>
            </div>
        </van-popup>
    </div>
</body>

<script type="text/javascript">
    var vm;
    apiready = function () {
        //$('.init-full').show();
        var userInfo = FLD.getUserInfo();

        var PID = api.pageParam.PID;
        var PName = api.pageParam.PName;

        api.addEventListener({
            name: 'selectArray'
        }, function (ret, err) {
            var selectType = ret.value.selectType;
            var type = ret.value.type;
            var array = ret.value.array;
            if (selectType == 110) {
                var nameArray = [];
                var idArray = [];
                for (var i in array) {
                    nameArray.push(array[i].name);
                    idArray.push(array[i].id);
                }
                vm.searchData.S_CXPeriodName = nameArray.join();
                vm.searchData.S_CXPeriodID = idArray.join() || 0;
            } else if (selectType == 98) {
                var nameArray = [];
                var idArray = [];
                for (var i in array) {
                    nameArray.push(array[i].name);
                    idArray.push(array[i].id);
                }
                vm.searchData.S_CXBranchName = nameArray.join();
                vm.searchData.S_CXBranchID = idArray.join() || 0;
            }
        })

        vm = new Vue({
            el: '#app',
            data: {
                showLoading: false,
                showSearch: false,
                tabActive: 1,
                searchData: {
                    S_BranchID: userInfo.S_BranchID,
                    S_CXPeriodID: PID,
                    S_CXPeriodName: PName,
                    S_CXBranchID: 0,
                    S_CXBranchName: ''
                },
                reportList: [],
                accountList: [],
                reportTotalData: []
            },
            created: function () {
                var that = this;
                that.searchList();


            },
            methods: {
                getTotalCount() {
                    var that = this;
                    var num1 = 0;
                    var num2 = 0;
                    var num3 = 0;
                    var num4 = 0;
                    var num5 = 0;
                    var num6 = 0;
                    var num7 = 0;
                    // var num8 = 0;
                    for (var i in that.reportList) {
                        num1 += that.reportList[i].XSMoney;
                        num2 += that.reportList[i].SKMoney;
                        num3 += that.reportList[i].XMMoney;
                        num4 += that.reportList[i].FZMoney;
                        num5 += that.reportList[i].SYMoney;
                        num6 += that.reportList[i].NClint;
                        num7 += that.reportList[i].PJMoney;
                        // num8 += that.reportList[i].FSYMoney;
                    }
                    that.reportTotalData = {
                        num1: num1.toFixed(2),
                        num2: num2.toFixed(2),
                        num3: num3.toFixed(2),
                        num4: num4.toFixed(2),
                        num5: num5.toFixed(2),
                        num6: num6.toFixed(0),
                        num7: num7.toFixed(2)
                        // num8: num6.toFixed(2)
                    }
                },
                toggleActive(index) {
                    var that = this;
                    that.tabActive = index;
                    if (index == 2) {
                        FLD.ajax('AP_UserCXY', {}, function (res) {
                            that.accountList = res.ds;
                        })

                    }
                    if (index == 3) {
                        setTimeout(function () {
                            if (that.searchData.S_CXBranchName) {
                                var splitArray = that.searchData.S_CXBranchName.split(',');
                                if (splitArray.length > 1) {
                                    that.searchData.S_CXBranchID = userInfo.S_BranchID;
                                    that.searchData.S_CXBranchName = userInfo.S_BranchName;
                                }
                            } else {
                                that.searchData.S_CXBranchID = userInfo.S_BranchID;
                                that.searchData.S_CXBranchName = userInfo.S_BranchName;
                            }
                            FLD.ajax('AP_XQCXXX', that.searchData, function (res) {
                                that.reportList = res.ds;
                                that.getTotalCount();
                                that.setCharts();
                            })

                        }, 200)

                    }
                },
                searchList() {
                    var that = this;
                    if (that.tabActive == 3 && userInfo.S_BranchID == 1) {
                        if (!that.searchData.S_CXPeriodName && !that.searchData.S_CXBranchName) {
                            layer.open({
                                content: '请选择单一账期或者单一分支机构!',
                                skin: 'msg',
                                time: 2
                            });
                            return false;
                        } else {
                            var splitArray1 = that.searchData.S_CXPeriodName.split(',');
                            var splitArray2 = that.searchData.S_CXBranchName.split(',');
                            if (splitArray1.length > 1 && splitArray2.length > 1) {
                                layer.open({
                                    content: '请选择单一账期或者单一分支机构!',
                                    skin: 'msg',
                                    time: 2
                                });
                                return false;
                            }
                        }

                    }
                    that.showSearch = false;
                    that.showLoading = true;
                    FLD.ajax('AP_XQCXXX', that.searchData, function (res) {
                        that.showLoading = false;
                        that.reportList = res.ds;
                        that.getTotalCount();
                        if (that.tabActive == 3) {
                            that.setCharts();
                        }
                    })
                },
                intoDetail(row, type) {
                    api.openWin({
                        name: 'aggregationDetail',
                        url: 'aggregationDetail.html',
                        reload: true,
                        slidBackEnabled: false,
                        pageParam: {
                            row: row,
                            type: type
                        }
                    })
                },
                intoAccountDetail(row) {
                    api.openWin({
                        name: 'accountDetail',
                        url: 'accountDetail.html',
                        reload: true,
                        slidBackEnabled: false,
                        pageParam: {
                            userId:row.UserID
                        }
                    })
                },
                setCharts() {
                    var that = this;
                    var xData = [];
                    var yData1 = [];
                    var yData2 = [];
                    var yData3 = [];
                    var yData4 = [];
                    if (that.searchData.S_CXPeriodName) {
                        var splitArray = that.searchData.S_CXPeriodName.split(',');
                        if (splitArray.length == 1) {
                            for (var i in that.reportList) {
                                if (userInfo.S_BranchID != 1) {
                                    xData.push(that.reportList[i].PeriodCD)
                                } else {
                                    if (that.searchData.S_CXBranchName) {
                                        var splitArray_ = that.searchData.S_CXBranchName.split(',');
                                        if (splitArray_.length == 1) {
                                            xData.push(that.reportList[i].PeriodCD)
                                        } else {
                                            xData.push(that.reportList[i].BSName)
                                        }
                                    } else {
                                        xData.push(that.reportList[i].BSName)
                                    }

                                }

                                yData1.push((that.reportList[i].XSMoney / 1000).toFixed(2))
                                yData2.push((that.reportList[i].SKMoney / 1000).toFixed(2))
                                yData3.push((that.reportList[i].XMMoney / 1000).toFixed(2))
                                yData4.push((that.reportList[i].SYMoney / 1000).toFixed(2))
                            }
                        } else {
                            for (var i in that.reportList) {
                                xData.push(that.reportList[i].PeriodCD)
                                yData1.push((that.reportList[i].XSMoney / 1000).toFixed(2))
                                yData2.push((that.reportList[i].SKMoney / 1000).toFixed(2))
                                yData3.push((that.reportList[i].XMMoney / 1000).toFixed(2))
                                yData4.push((that.reportList[i].SYMoney / 1000).toFixed(2))
                            }
                        }
                    } else {
                        for (var i in that.reportList) {
                            xData.push(that.reportList[i].PeriodCD)
                            yData1.push((that.reportList[i].XSMoney / 1000).toFixed(2))
                            yData2.push((that.reportList[i].SKMoney / 1000).toFixed(2))
                            yData3.push((that.reportList[i].XMMoney / 1000).toFixed(2))
                            yData4.push((that.reportList[i].SYMoney / 1000).toFixed(2))
                        }
                    }
                    var myChart = echarts.init(document.getElementById('main'));
                    var option = {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'cross',
                                label: {
                                    backgroundColor: '#6a7985'
                                }
                            }
                        },
                        grid: {
                            left: 50
                        },
                        legend: {
                            data: ['销售金额', '销售收款', '销售毛利', '当月收益']
                        },
                        xAxis: [
                            {
                                type: 'category',
                                data: xData,
                                axisPointer: {
                                    type: 'shadow'
                                },
                                axisLine: {
                                    lineStyle: {
                                        color: '#ccc'
                                    }
                                }
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value',
                                name: '金额(千元)',
                                axisLine: {
                                    show: false
                                },
                                axisTick: {
                                    show: false
                                },
                                splitLine: {
                                    lineStyle: {
                                        color: ['#ccc']
                                    }
                                }
                            }
                        ],
                        series: [
                            {
                                name: '销售金额',
                                type: 'bar',
                                barWidth: 5,
                                data: yData1
                            },
                            {
                                name: '销售收款',
                                type: 'bar',
                                barWidth: 5,
                                data: yData2
                            },
                            {
                                name: '销售毛利',
                                type: 'bar',
                                barWidth: 5,
                                data: yData3
                            },
                            {
                                name: '当月收益',
                                type: 'line',
                                data: yData4
                            }
                        ]
                    };
                    myChart.setOption(option);
                },
                openScreen(type, index) {
                    var obj = {
                        S_Type: index,
                        S_Cont: '',
                        S_BranchID: this.searchData.S_BranchID,
                        S_SXZ: '',
                        S_StockID: 0,
                        S_CargoID: 0,
                        S_BarCode: '',
                        S_PriceN: 0,
                        S_ProductID: 0
                    }
                    api.openWin({
                        name: '筛选' + index,
                        url: 'common/baseMultipleScreen.html',
                        reload: true,
                        slidBackEnabled: false,
                        pageParam: {
                            filterData: obj,
                            type: type,
                            allowClear: false
                        }
                    })
                },
                onClickLeft() {
                    api.closeWin();
                }
            }
        })
    };
</script>

</html>